<template>
  <div>
    <Navbar></Navbar>
    <div id="one">
      <div id="abc">
        <div class="one">
          <label for="">用户名</label><br>
          <input type="text" v-model="name">
          <br>
          <p>请使用英文字母、数字或两者组合</p>
          <p>长度4-12位</p>
        </div>

        <div class="one">
          <label for="">邮箱</label><br>
          <input type="email" v-model="email">
          <br>
          <p>请使用真实邮箱</p>
        </div>

        <div class="one">
          <label for="">密码</label><br>
          <input type="text" v-model="psw">
          <br>
          <p>密码长度至少6位</p>
        </div>

        <div>
          <label for="">确认密码</label><br>
          <input type="text" v-model="vpsw">
        </div>
        


        <br><br>
        <div id="btn">
          <a @click="regist">成为迷糊娃</a>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
  import Navbar from "../components/Navbar.vue"
  export default {
    components: { Navbar },
    data:function(){
      return {
        name:"",
        psw:"",
        email:"",
        vpsw:""
      }
    },
    methods:{
      regist(){
        var data = {
          username:this.name,
          psw:this.psw,
          email:this.email
        }
        if(this.name.length<0){
          alert("请输入名字")
          return;
        }else if(this.psw.length<0){
          alert("请输入密码")
          return;
        }else if(this.vpsw.length<0){
          alert("请输入确认密码")
          return;
        }else if(this.psw==!this.vpsw){
          alert("两次密码不一样")
          return;
        }else{
          // alert("注册成功")
          this.$store.dispatch("regist",data);
        }
        
      }
    }
  }

</script>

<style scoped>
  input{
    width: 90%;
    height: 25px;
  }
  a{
    display:block;
    width: 80px;
    height: 30px; 
    color: white;
    background-color: #E24C7C;
    text-align: center;
    line-height: 30px;
    border-radius: 3px;
    font-size: 12px
  }
  #one{
    padding-left: 12px;
    padding-top: 12px;
  }
  p{
    font-size: 10px;
  }
  label{
    display: inline-block;
    padding-bottom: 5px;
  }
</style>